<script setup>
import prizePage from '@/views/prize.vue'
import GiftPage from '@/views/openGift.vue'
import { ref, onMounted } from 'vue'
import { useCounterStore } from '@/stores/list'
import { storeToRefs } from 'pinia'

const newItem = ref('')

const showRef = ref(false)
const show2Ref = ref(false)
const showOpenGiftRef = ref(false)
const container = ref(null)
const taizai = ref(null)
const taizai2 = ref(null)
const isInside = ref(false)
const isInside2 = ref(false)

const counterStore = useCounterStore()
const { gettedGift, giftList, count } = storeToRefs(counterStore)

// 添加奖品
const addItem = () => {
    if (newItem.value) {
        giftList.value.push(newItem.value)
        newItem.value = ''
    }
}

// 为绑定的container添加类名
onMounted(() => {
    container.value.classList.add('add')
})

const closeGiftPage = () => {
    showOpenGiftRef.value = false
    container.value.classList.add('add')
}

// 打开抽奖页面
const openGiftPage = () => {
    if (count.value === 0) {
        alert('我就送你三抽不要太贪心哦')
        return
    }
    isInside.value = false
    isInside2.value = false
    count.value--
    showOpenGiftRef.value = true
    container.value.classList.remove('add')
}

// 鼠标移入显示说话框
const handleMouseover = () => {
    if (!isInside.value) {
        // console.log("inside")
        isInside.value = true
        taizai.value.classList.add('add-inside')
    }
}

// 鼠标移入显示说话框
const handleMouseover2 = () => {
    if (!isInside2.value) {
        // console.log("inside2")
        isInside2.value = true
        taizai2.value.classList.add('add-inside2')
    }
}

// 背景音乐播放
const bgMusic = ref(null)

onMounted(() => {
bgMusic.value.play()
bgMusic.value.volume = 0.2
})
</script>

<template>
    <!-- 播放音乐，bgMusic.mp3 -->
    <audio ref="bgMusic" controls loop>
        <source src="@/assets/music/bgMusic.mp3">
    </audio>
    <div ref="container" class="container">
        <!-- 礼物 -->
        <div class="gift" @click="openGiftPage">
            <img src="@/assets/img/gift.png" alt="">
        </div>
        <button class="btnPrize" @click="showRef = true">查看奖池</button>
        <button class="btnPrize" @click="show2Ref = true">查看中奖</button>

        <GiftPage class="openGift" v-if="showOpenGiftRef" @close="closeGiftPage" />
        <!-- 用props方式将奖品列表传递给奖品页面（giftList） -->

        <prizePage :giftList="giftList" v-show="showRef" @close="showRef = false">
            <template #prize-title>
                奖品池
            </template>

            <template #add-item>
                <div class="add-item">
                    <input type="text" placeholder="请输入奖品名称" v-model="newItem">
                    <button @click="addItem">添加</button>
                </div>
            </template>
        </prizePage>

        <prizePage :giftList="gettedGift" v-show="show2Ref" @close="show2Ref = false">
            <template #prize-title>
                获得的奖品
            </template>
        </prizePage>
    </div>

    <!-- 131 90 -->
    <div @mouseover="handleMouseover" class="taizai"></div>
    <div @mouseover="handleMouseover2" class="taizai2"></div>

    <div v-show="isInside" ref="taizai">生日快乐,请跟我<br>一起殉情吧!</div>
    <div v-show="isInside2" ref="taizai2">shhhh, <br>这个给你, 你有 {{ count }} 个抽奖机会哦</div>
</template>

<style scoped>
.add {
    background-image: url('@/assets/img/background.jpg');
    background-size: cover;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;

    .gift {
        position: fixed;
        width: 200px;
        height: 200px;
        overflow: hidden;
        top: 65%;
        left: 49%;

        img {
            max-width: 100%;
            max-height: 100%;
        }
    }

    /* 鼠标移入有放大效果 */
    .gift:hover {
        cursor: pointer;
        transform: scale(1.1);
    }

    .btnPrize {
        display: block;
        margin: 20px 0px;
        width: 150px;
        position: relative;
        margin-top: 20px;
        background-color: grey;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }

    .gettedGift {
        position: fixed;
        width: px;
        background-color: #333;
        border-radius: 4px;
        padding: 10px;

        .ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin-bottom: 10px;
            font-size: 16px;
            color: #fff;
            background-color: #333;
            padding: 10px;
            border-radius: 4px;
        }
    }


    .add-item {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 50px;
        border-radius: 10px;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;

        input {
            width: 200px;
            height: 30px;
            border: none;
            outline: none;
            padding: 0 10px;
            font-size: 16px;
        }

        button {
            width: 100px;
            height: 30px;
            border: none;
            outline: none;
            background-color: #4caf50;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                background-color: #3e8e41;
            }
        }
    }
}

.taizai {
    position: fixed;
    width: 100px;
    height: 90px;
    /* background-color: #fff; */
    top: 27%;
    left: 15%;
    z-index: 300;
}

.taizai2 {
    position: fixed;
    width: 300px;
    height: 200px;
    /* background-color: #fff; */
    top: 23%;
    left: 45%;
    z-index: 300;
}

.add-inside {
    /* 椭圆框架,背景颜色白色半透明 */
    position: fixed;
    width: 100px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    /* 字体在框内中央竖直显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
    top: 30%;
    left: 5%;
    z-index: 300;
}

.add-inside2 {
    position: fixed;
    width: 100px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    /* 字体在框内中央竖直显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
    top: 30%;
    left: 70%;
    z-index: 300;
}
</style>